<template>
  <div>
    <el-dialog title="桌面设置" :visible="visible" fullscreen append-to-body @close="close">
      <el-select v-if="!isViewMode" v-model="selectTemplate" size="small" placeholder="请选择模板">
        <el-option
          v-for="(template, index) in templateList"
          :key="index"
          :value="template.id"
          :label="template.name"
        />
      </el-select>
      <el-button v-if="!isViewMode" type="primary" size="small" @click="changeTemplate">应用模板</el-button>
      <el-button type="primary" size="small" @click="changeMode()">{{ isViewMode ? '编辑' : '预览' }}</el-button>
      <el-button v-if="!isViewMode" type="primary" size="small" @click="confirm">确定</el-button>
      <div>
        <component
          :is="componentName"
          :drag-report-data="portalData"
          :component-data="componentData"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { PreviewDataToLayoutData } from './utils/dragReport.js'
import portalEdit from './edit'
import portalPreview from './view'
const VIEW_NAME = 'portal-preview'
const EDIT_NAME = 'portal-edit'

export default {
  components: { portalEdit, portalPreview },
  data() {
    return {
      visible: false,
      selectTemplate: '',
      isViewMode: false,
      templateList: [],
      // 组件数据
      componentData: [],
      portletList: [],
      // 布局数据
      layoutData: {},
      portalData: {
      },
      queryParams: {
        status: this.constant.STATUS.NORMAL,
        sortInfo: {
          sort_field: 'orderNo',
          sort_sortType: 'ascending'
        }
      }

    }
  },
  computed: {
    componentName() {
      return this.isViewMode ? VIEW_NAME : EDIT_NAME
    }
  },
  created() {
    // 加载模板
    this.getTemplateList()
  },
  methods: {
    show(config) {
      const that = this
      this.$api.support.portletCategory.getPortletList(this.queryParams).then(res => {
        this.componentData = res.data
        this.componentData.forEach(category => that.portletList.push(...category.portletList))
        this.portletList.forEach(item => { item.dialogVisible = false })
        if (config) {
          this.layoutData = JSON.parse(config)
        } else {
          // 初始值
          this.layoutData = {
            title: 'desktop',
            children: [
              {
                index: 1,
                initHeight: 420,
                children: [
                  { code: null, name: null, col: 24, initCol: 24 }
                ]
              }
            ]
          }
          this.portalData = {
            title: '',
            children: []
          }
        }
        // 格式化设置
        this.formatPortalData()
      })

      this.visible = true
    },

    close() {
      this.visible = false
    },
    confirm() {
      this.$emit('ok', this.portalData)
      this.visible = false
    },
    changeMode() {
      this.isViewMode = !this.isViewMode
    },
    changeTemplate() {
      const template = this.templateList.find(item => item.id === this.selectTemplate)
      if (template && template.config) {
        this.portalData = JSON.parse(template.config)
      }
    },
    // 获取模板
    getTemplateList() {
      this.$api.support.portalTemplate.list(this.queryParams).then(res => {
        this.templateList = res.data
      })
    },

    formatPortalData() {
      this.portalData = PreviewDataToLayoutData(
        this.layoutData,
        this.portletList,
        { showControllerBar: false },
        { showChildrenControllerBar: false }
      )
    }

  }
}

</script>

<style scoped>
</style>
